<template>
	<view>
		<view class="box">
			<view style="padding: 10px;">
				<view style="display: flex;">
					<view style="font-size: 18px;font-weight: bold;">优选药品</view>
					<view style="margin-left: 15px;color: gray;margin-top: 4px;">专属保障</view>
					<view style="margin-left: 10px;color: gray;margin-top: 4px;">优质呵护</view>
					<view style="font-weight: bold;margin-left: 60px;margin-top: 4px;" @click="dialogToggle('error')">
						查看更多 ></view>
				</view>
			</view>
			<scroll-view scroll-x="true" show-scrollbar="false"
				style="white-space: nowrap; width: 100%;margin-top: 10px;">
				<view style="display: flex;gap: 10px;">
					<view v-for="(medicines, index) in medicinesTypeData" :key="index">
						<button type="default" style="font-size: 14px;" size="mini"
							@click="changeOffice(medicines, index)"
							:class="{ 'is-active': selectedButtonIndex === index }">
							{{medicines.typeName}}
						</button>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="flex-wrap: wrap;display: flex;">
			<view v-for="(item, index) in medicinesData" :key="item.id"
				style="width: 50%; padding: 5px 5px; box-sizing: border-box;">
				<view style="margin-bottom: 20rpx;">
					<view class="box" @click="goMedicinesDetail(item.id)">
						<image :src="item.photo" style="width: 100%; height: 180px;"></image>
						<view>
							<view style="display: flex;">
								<span>
									<span class="square-box"
										style="border: 1px solid red; color: white; background-color: #FF695C; margin-right: 10rpx;">自营</span>
									<span style="font-weight: bold; font-size: 16px;">{{item.name}}</span>

								</span>
							</view>
							<view style="margin-top: 5px;">{{item.medicinesStyleList[0].styleDescribe}}起/盒</view>
							<view style="display: flex;">
								<view style="flex: 8; display: flex; color: red;margin-top: 5px;">
									<view style="margin-top: 5rpx;">￥</view>
									<text
										style="font-size: 18px; margin-right: 10rpx;">{{item.medicinesStyleList[0].price}}</text>
									<view style="margin-top: 10rpx;">起/盒</view>
								</view>
								<view style="margin-top: 2px;">
									<image @click.native.stop='addCart(item)' src="../../static/imgs/购物车.png" style="width: 50rpx;" mode="widthFix">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 10px;">
			<view style="display: flex;">
				<view style="font-size: 18px;font-weight: bold;">美容护肤</view>
				<view style="margin-left: 15px;color: gray;margin-top: 4px;">保湿滋润</view>
				<view style="margin-left: 10px;color: gray;margin-top: 4px;">美白嫩肤</view>
				<view style="font-weight: bold;margin-left: 60px;margin-top: 4px;"@click="dialogToggle('error')">查看更多 ></view>
			</view>
		</view>
		<view style="flex-wrap: wrap;display: flex;">
			<view v-for="(item, index) in medicinesByTypeData" :key="item.id"
				style="width: 50%; padding: 5px 5px; box-sizing: border-box;">
				<view style="margin-bottom: 20rpx;">
					<view class="box" @click="goMedicinesDetail(item.id)">
						<image :src="item.photo" style="width: 100%; height: 180px;"></image>
						<view>
							<view style="display: flex;">
								<span>
									<span class="square-box"
										style="border: 1px solid red; color: white; background-color: #FF695C; margin-right: 10rpx;">自营</span>
									<span style="font-weight: bold; font-size: 16px;">{{item.name}}</span>

								</span>
							</view>
							<view style="margin-top: 5px;">{{item.medicinesStyleList[0].styleDescribe}}起/盒</view>
							<view style="display: flex;">
								<view style="flex: 8; display: flex; color: red;margin-top: 5px;">
									<view style="margin-top: 5rpx;">￥</view>
									<text
										style="font-size: 18px; margin-right: 10rpx;">{{item.medicinesStyleList[0].price}}</text>
									<view style="margin-top: 10rpx;">起/盒</view>
								</view>
								<view style="margin-top: 2px;">
									<image @click.native.stop='addCart(item)' src="../../static/imgs/购物车.png" style="width: 50rpx;" mode="widthFix">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="padding: 10px;">
			<view style="display: flex;">
				<view style="font-size: 18px;font-weight: bold;">医疗器械</view>
				<view style="margin-left: 15px;color: gray;margin-top: 4px;">诊断利器</view>
				<view style="margin-left: 10px;color: gray;margin-top: 4px;">安全可靠</view>
				<view style="font-weight: bold;margin-left: 60px;margin-top: 4px;" @click="dialogToggle('error')">查看更多 ></view>
			</view>
		</view>
		<view style="flex-wrap: wrap;display: flex;">
			<view v-for="(item, index) in medicinesByTypeData2" :key="item.id"
				style="width: 50%; padding: 5px 5px; box-sizing: border-box;">
				<view style="margin-bottom: 20rpx;">
					<view class="box" @click="goMedicinesDetail(item.id)">
						<image :src="item.photo" style="width: 100%; height: 180px;"></image>
						<view>
							<view style="display: flex;">
								<span>
									<span class="square-box"
										style="border: 1px solid red; color: white; background-color: #FF695C; margin-right: 10rpx;">自营</span>
									<span style="font-weight: bold; font-size: 16px;">{{item.name}}</span>

								</span>
							</view>
							<view style="margin-top: 5px;">{{item.medicinesStyleList[0].styleDescribe}}起</view>
							<view style="display: flex;">
								<view style="flex: 8; display: flex; color: red;margin-top: 5px;">
									<view style="margin-top: 5rpx;">￥</view>
									<text
										style="font-size: 18px; margin-right: 10rpx;">{{item.medicinesStyleList[0].price}}</text>
									<view style="margin-top: 10rpx;">起/盒</view>
								</view>
								<view style="margin-top: 2px;">
									<image @click.native.stop='addCart(item)' src="../../static/imgs/购物车.png" style="width: 50rpx;" mode="widthFix">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="我知道了" title="通知" content="测试数据,暂无更多信息"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				medicinesTypeData: {},
				typeId: 6,
				medicinesByTypeData: {},
				medicinesByTypeData2: {},
				medicinesData: {},
				selectedButtonIndex: 0,
				num:1,
			}
		},
		onShow() {
			this.loadAllMedicinesType()
			this.loadMedicinesByType(this.typeId)
			this.loadMedicinesByTypeName('美容护肤')
			this.loadMedicinesByTypeName2('医疗器械')
		},
		methods: {
			addCart(item) {
				let data = {
					num: this.num,
					businessId: item.businessId,
					medicinesStyleId: item.medicinesStyleList[0].id,
					medicinesId: item.id,
				}
				this.$request.post('/cart/add', data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '加入成功'
						})
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			loadAllMedicinesType() {
				this.$request.get('/medicinesType/selectAll').then(res => {
					if (res.code === '200') {
						this.medicinesTypeData = res.data.slice(2, 8)
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			loadMedicinesByType(typeId) {
				this.$request.get(`/medicines/selectByTypeId/${typeId}`).then(res => {
					if (res.code === '200') {
						this.medicinesData = res.data.slice(0, 8)
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			loadMedicinesByTypeName(typeName) {
				this.$request.get(`/medicines/selectByTypeName/${typeName}`).then(res => {
					if (res.code === '200') {
						this.medicinesByTypeData = res.data.slice(0, 8)
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			loadMedicinesByTypeName2(typeName) {
				this.$request.get(`/medicines/selectByTypeName/${typeName}`).then(res => {
					if (res.code === '200') {
						this.medicinesByTypeData2 = res.data.slice(0, 8)
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			goMedicinesDetail(medicinesId) {
				uni.navigateTo({
					url: '/pages/medicinesDetail/medicinesDetail?medicinesId=' + medicinesId
				})
			},
			changeOffice(medicines, index) {
				this.loadMedicinesByType(medicines.id)
				this.selectedButtonIndex = index
			},
		}
	}
</script>

<style>
	.is-active {
		background-color: #ffaa00;
		/* 选中状态的背景颜色示例 */
		color: #FFF7F3;
		/* 文本颜色 */
		border-color: #FF5000;
		/* 边框颜色 */
	}
</style>